import { Component } from "react"
const Child = () => {
  const handleClick = () => {
    console.log('handle')
  }
  return (
    <div onClick={handleClick}>
      我是子组件
    </div>
  )
}
class TestEvent extends Component {
  handleClick (data, e) {
    console.log(123)
    console.log(data)
    console.log(e)
    // 没有进行传参，第二个参数是undefined
    console.log(this, 'this')
  }
  handleClick2 = () => {
    console.log(this.state.count)
    // 箭头函数指向的是上层的this
  }
  state = {
    count: 0,
  };
  render () {

    return (<div>
      <h1>事件的绑定</h1>
      <p>
        <button onClick={this.handleClick}>点击不加圆括号</button>
        {/* <button onClick={console.log(1)}>console.log();</button> */}
        <button onClick={this.handleClick.bind(this)}>点击不加圆括号1</button>
        <button onClick={this.handleClick2}>点击不加圆括号2</button>
        {/*  */}
        {/* 不加圆括号，相当于没有进行传参， */}
        {/* 这里不能加圆括号，原因是会默认执行一次，看作是立即调用 */}
        {/* 这里没有传参数，则默认参数位事件对象，这时候访问this是undefined*/}
      </p>
      <p>
        <button onClick={this.handleClick()}>点击加圆括号</button></p>
      {/* 这里默认执行一次，在页面渲染完成之前就执行 */}
      <p>
        <button onClick={(event) => {
          console.log('箭头')
          // console.log(event)
          this.handleClick(111, event)
        }}>箭头函数套函数进行传参</button>
        {/* 如果需要传参，需要函数套函数 */}
        {/* 如果还需要拿到事件对象，就在箭头函数里绑一个event */}
      </p>
      <Child></Child>
    </div>)
  }
}
export default TestEvent